<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<link rel="stylesheet" href="gadgets.css" type="text/css" />

<title>Treemap Diagram</title>
</head>

<body>


<h1 class="title">Liquid Diagrams</h1>

<p class="title">
&copy;2009 Martin Lessacher<br/>
</p>


<h2 class="title">Treemap</h2>
<p>The treemap visualisation was invented by Ben Shneiderman in 1990 to visualize the space usage of his hard disk in a compact and effective way. A treemap is a visualisation of hierarchical data by using nested rectangles. For each data item in the hierarchy a rectangle is drawn. All the rectangles of one hierarchy level share the space of their common parent's rectangle. The space that each rectangle takes is determined by its proportion of the parent space.<p>

<br />

<br />
<table width="1250" border="0" cellspacing="10">
  <tr>
    <td><a href="images/treemap_sqarified.png"><img class="center" src="images/treemap_sqarified.png" alt="The Liquid Diagrams treemap visualisation." width="600" height="350"/></a></td>
    <td><a href="images/treemap_slice_and_dice.png"><img class="center" src="images/treemap_slice_and_dice.png" alt="The Liquid Diagrams treemap visualisation." width="600" height="350"/></a></td>
  </tr>
</table>
<br/>

<h2 class="title">Features</h2>

<b>Changing the drawing algorithm</b><br/>
<p>With "Squarified" and "Slice and Dice" there are two available algorithms for computing the space distribution of the rectangles.</p><br/>

<b>Changing the size determining property</b><br/>
<p>The size of each rectangle in the diagram is poportional to a specific data property of an entity. This property can be chosen among all numerical data columns and changed during runtime.</p><br/>

<b>Changing the colours</b><br/>
<p>Any data column can be chosen as the reference to determine the colour of each entity.</p>

<p>The main colour tone used to draw entities can be changed by using a colour picker. To change the main colour tone the user has to
click any colour rectangle in the legend panel. This will bring
up the colour picker. After selecting the colour the selection is verified with the Ok button and the
colour is immediately assigned to the diagram.</p><br/>

<b>Changing fonts</b><br/>
<p>All the fonts used in the visualisations can be replaced by other fonts. To do this the user has to switch
to the "Font" panel in the options and choose a font colour, size and type for the desired font 
category. When using the corresponding buttons it is possible to set the font style to bold, italic and 
underline. The selected fonts are loaded on runtime into the gadget.</p><br/>

<b>Zoom</b><br/>
<p>The zoom function can be applied to every node in the hierarchy that owns child nodes. The diagram will then be zoomed to this specific node. To zoom into an item the user just have to click on the specific item or to click on the items name in the tree view.</p><br/>

<b>Tree View</b><br/>
<p>A seperate tree view displaying the hierarchical structure of the data can be shown next to the diagram.</p><br/>

<b>Changing diagram titles</b><br/>
<p>The user can dynamically alter the diagram title, the x-axis title, and the y-axis tile by clicking on
the appropriate label. A text box will then appear to enter the new title. The edit process is finished
by confirming the changes with the enter key.</p><br/>

<b>Interactively changing gadget settings</b><br/>
<p>Using Google Docs it is not possible to change the gadget settings without losing all changes that
have been made in the visualisation. That means if changes like filters, swapped axes, hidden
data,... have been made they will be reset when changing the gadget parameters with the default
Google gadget settings. This is due to the fact that a new gadget request is sent by Google and the
visualisation is created once again.</p>

<p>Using the Options Panel the user is able to change the parameters dynamically while
exploring the data. This is done through a separate gadget settings menu displayed to the left side
of the visualisation.</p>
<br/><br/>

<h2 class="title">Data Format</h2>
<p>The data format of this visualisation can be seen in the <a href="dataformats.html#hierarchical">data formats document</a>.</p>
<br /><br />

<h2 class="title">Parameter List</h2>

<table width="1290" border="1">
  <tr>
    <td width="65" align="center">Number</td>
    <td width="225" align="left">Parameter</td>
    <td width="98" align="center">Type</td>
    <td width="163" align="center">Options</td>
    <td width="705" align="left">Description</td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="left">X-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The x-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="left">Y-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The y-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td align="left">Compute Category Values</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">If set to true, supplied parent values (data set) are ignored and instead the parent value is computed by summing up all child note values.</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="left">Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Diagram Title - displayed above the visualisation.</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="left">Number Display Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Defines how numbers are to be displayed within the diagram.</td>
  </tr>  
  <tr>
    <td align="center">6</td>
    <td align="left">Number Input Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Determines the format in which the supplied data is formatted.</td>
  </tr> 
  <tr>
    <td align="center">7</td>
    <td align="left">Drop First Line</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines if the first data line is to be dropped. This is the case if the first line contains header information. This value has to be supplied only when calling the gadget manually using JavaScript(not Google Docs).</td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td align="left">Show Tree View</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines if a tree view should be shown next to the diagram which displays the hierarchical structure of the data</td>
  </tr>
  <td align="center">9</td>
    <td align="left">Show Borders</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">If this value is set, each parent value has a small border around its children. This helps to visualize the hierachical aspect of the data.</td>
  </tr>
  <tr>
    <td align="center">10</td>
    <td align="left">Complex Tooltip</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Turns complex tooltips on or off. Complex tooltips contain all the information about the entity but may eventually take more processing time.</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="left">Number of Bins</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Used to set the maximum number of colour bins displayed in the legend.</td>
  </tr>
  <tr>
    <td align="center">12</td>
    <td align="left">Legend</td>
    <td align="center">String</td>
    <td align="center">No Legend | Horizontal | Vertical</td>
    <td align="left">Determines the legend position.</td>
  </tr>
  <tr>
    <td align="center">13</td>
    <td align="left">Algorithm</td>
    <td align="center">String</td>
    <td align="center">Squarified | Slice and Dice</td>
    <td align="left">There are two different partitioning algorithms available to compute the space distribution. The first is one is Squarified, the other Slice and Dice.</td>
  </tr>
  <tr>
    <td align="center">14</td>
    <td align="left">No Header when Little Space</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">If there is little space for a parent item, the header of this item will not be drawn, giving the children more space.</td>
  </tr>
  <tr>
    <td align="center">15</td>
    <td align="left">Show Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the diagram title.</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="left">Use Ratio</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether to use a custom display ratio or not. If yes, x-ratio and y-ratio need to be supplied also.</td>
  </tr>
  <tr>
    <td align="center">17</td>
    <td align="left">X-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Width ratio factor.</td>
  </tr>
  <tr>
    <td align="center">18</td>
    <td align="left">Y-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Height ratio factor.</td>
  </tr>
</table>
<br/> <br/>

</body>
</html>
